<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" th:href="@{../css/login.css}" href="../css/login.css">
</head>
<body>
<form action="/register11" method="get">
    <br> <br> <br>
    <div style="width:100%;float:left;margin:0 20px;"></div>
    <div style="font-size:28px;text-align: center">欢迎注册</div>
    <br>
    <div style="text-align:center;border: solid 1px black;width: 350px;height: 500px;margin:0 auto;">
        <h5>登陆账号：<input type="text" name="name" placeholder="请输入账号" required></h5>
        <br>
        <h5>用户网名：<input type="text"name="user"placeholder="请输入用户名"required></h5>
        <br>
        <h5>用户职业：<input type="text"name="job"placeholder="请输入职业"required></h5>
        <br>
            <h5>登陆密码：<input type="password" name="password" id="pp" placeholder="请输入密码" required></h5>
        <br>
            <h5>确认密码：<input type="password" id="pp1" placeholder="再次确认密码"  onblur="validatePassword()" required></h5>
        <br>
            <h5>电子邮箱：<input type="email" name="mail" placeholder="请输入电子邮箱" required></h5>
        <br>
        <input style="background-color: #00B5AD;color: #FFFFFF;text-shadow: none;width: 100px" type="submit" value="注册">
    </div>
    <script>
    // function Check() {
    //     if (document.getElementById("pp").value != document.getElementById("pp1").value) {
    //         alert("两次密码不一样");
    //     }
    // }
    // window.onload = function () {
    //     document.getElementById("pp").onchange = validatePassword;
    //     document.getElementById("pp1").onchange = validatePassword;
    // }
    function validatePassword() {
        var pass2 = document.getElementById("pp").value;
        var pass1 = document.getElementById("pp1").value;
        if (pass1 != pass2)
            document.getElementById("pp1").setCustomValidity("Passwords Don't Match");
        else
            document.getElementById("pp1").setCustomValidity('');
        // empty string means no validation error
    }
</script>
</form>
